<template>
	<view class="contener">
		<skeleton :skeleton="skeleton" :loading="loading">
			<block>
				<view class="cartBox">
					<view class="cartList">
						<view class="center_horizontal" style="margin:25rpx 0;">
							<view class="imgBox">
								<image :src="imgapi+product.avatar" style="width: 75px;height: 75px;margin-top: 6px;">
								</image>
							</view>
							<view class="rightBox">
								<view class="rightBoxtop line-clamp2">
									<u--text :text="product.title" :lines="3"></u--text>
								</view>

							</view>
						</view>
						<view class="cartBoxBot">
							<view>
								采摘单价/斤
							</view>
							<view>
								<text class="food-price">￥{{product.price}}</text>
							</view>
						</view>
						<view class="cartBoxBot">
							<view>
								重量(斤)
							</view>
							<view style="text-align: right;">
								<input type="digit" v-model="form.amount" @input="count" placeholder="请输入重量 单位(斤)" />
							</view>
						</view>
					</view>
					<view class="cartList">
						<view class="cartBoxBot2">
							<view>
								备注
							</view>
							<view style="text-align: right;">
								<input type="text" v-model="form.remark" placeholder="请填写备注" />
							</view>
						</view>
					</view>

				</view>
				<view class="cartBox">
					<view class="cartList">
						<view class="plotAddress">
							<view class="between">
								<view style="font-size: 32rpx;">是否自提</view>
								<view @click="evan()">
									<evan-switch v-model="form.hasTake" :size="22" active-color="#09bb07"
										:activeValue="true" :inactiveValue="false" :disabled="form.hasCourier==1">
									</evan-switch>
								</view>
							</view>
							<view class="plotAddressBorder tipColor">
								<text>提示: 由专人帮你把对应的果蔬打包好后，我们会微信通知您来土地自提</text>
							</view>
						</view>
					</view>
				</view>

				<view class="cartBox" v-if="product.hasCourier==1">
					<view class="cartList">
						<view class="plotAddress">
							<view class="between">
								<view style="font-size: 32rpx;">快递接收</view>
								<view @click="evan()">
									<evan-switch v-model="form.hasCourier" :size="22" active-color="#09bb07"
										:activeValue="1" :inactiveValue="-1" :disabled="form.hasTake"></evan-switch>
								</view>
							</view>
							<view class="plotAddressBorder tipColor">
								<text style="color: #2980b9;">该果蔬支持现摘现发快递，选择你的收货地址，我们会现摘打包发货到家给您(注：快递和自提只可选择其中一个)</text>
							</view>
						</view>
						<!-- 从商品详情进来的地址时显示 -->
						<view class="plotAddress">
							<view class="plotAddressBorder between  center_vertical" @tap="getaddress">
								<view style="display: flex;">
									<u-icon name="car-fill" color="#2980b9" size="28"></u-icon>
									<text style="margin-left: 10rpx;line-height: 50rpx;">{{delivery}}</text>
								</view>
								<view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="cartBox">
					<view class="cartList">
						<view class="plotAddress">
							<text>土地地址</text>
							<view class="plotAddressBorder">
								<text>{{product.plotAddress}}</text>
							</view>
						</view>
						<!-- 从商品详情进来的地址时显示 -->
						<!--<view class="plotAddress">
						<text>个人地址</text>
						<view class="plotAddressBorder between  center_vertical" @tap="getaddress">
							<view>
								<image src="../../static/images/home/weizhi.png" class="icon_next" mode="" ></image>
								<text style="margin-left: 10rpx;">{{getAddress}}</text>
							</view>
							<view>
								<image src="../../static/images/mine/icon_next.png" class="icon_next"></image>
							</view>
						</view>
					</view>-->
					</view>
				</view>
				<view class="cartBox">
					<view class="cartList">
						<view class="plotAddress">
							<text>支付方式</text>
							<radio-group name="pay" @change="payWay">
								<view class="plotAddressBorder between">
									<view class="center_vertical">
										<view>
											<image
												src="https://www.tdtye.com/files/vegetable_mall_file/default/static/growVegetables/pay_icon.png"
												class="icon"></image>
										</view>
										<view>
											微信支付
										</view>
									</view>
									<view>
										<radio value="wechat" />
									</view>
								</view>
								<view class="plotAddressBorder between">
									<view class="center_vertical">
										<view>
											<image
												src="https://www.tdtye.com/files/vegetable_mall_file/default/static/growVegetables/wallet_icon.png"
												class="icon">
											</image>
										</view>
										<view>
											余额支付
										</view>
									</view>
									<view>
										<radio value="balance" />
									</view>
								</view>
							</radio-group>
						</view>
					</view>
				</view>

				<!-- 上传照片 -->
				<view class="photoBox">
					<view>
						<template v-for="item in base64Arr">
							<image :src="item" style="width: 50px;height: 50px;margin-left: 20rpx;"></image>
						</template>
					</view>
					<view>
						<button class="photobtn" type="primary" plain size="mini" @tap="uploadPhotos">上传照片</button>
					</view>
				</view>

				<view class="cartBottom">
					<view class="allcount">总计:<text class="food-price"
							style="margin-left: 10rpx;">￥{{totalPrice}}</text></view>
					<view class="rightbot">
						<view class="settlementBox" @click="subOrder">提交订单</view>
					</view>
				</view>
			</block>
		</skeleton>
	</view>
</template>

<script>
	import Skeleton from '@/components/ls-skeleton/ls-skeleton.nvue';
	export default {
		components: {
			Skeleton
		},
		data() {
			return {
				form: {
					id: "",
					amount: "",
					img: [],
					remark: "",
					payWay: "",
					hasTake: false
				},
				delivery: '请选择您的收货地址',
				base64Arr: [],
				product: {},
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,
				weight: null,
				checked: false,
				imgapi: "",
				mark: '',
				totalPrice: 0.00, //总价

				loading: true,
				skeleton: [
					'square+line*2',
					'line*2',
					40,
					'line',
					40,
					'line*2',
					40,
					'line*3',

				], //骨架屏
			}
		},
		onLoad(e) {
			this.imgapi = this.$reqConfig.URLIMAGE
			if (e.type != "undefined") {
				this.form.hasTake = true
			}
			let detail = JSON.parse(decodeURIComponent(e.product));
			console.log("detail: ", detail);
			this.product = detail.productDetail
			this.product.plotAddress = detail.address
			this.form.id = this.product.id
			this.form.type = 1

			// 骨架屏取消
			this.loading = false;
		},
		methods: {
			//单选事件
			payWay(e) {
				this.form.payWay = e.detail.value
			},
			evan() {

			},
			getaddress() {
				let that = this
				uni.chooseAddress({
					success(res) {
						that.province = res.provinceName
						that.city = res.cityName
						that.area = res.countyName
						that.address = res.detailInfo
						that.name = res.userName
						that.phone = res.telNumber
						that.delivery = that.province + that.city + that.area + that.address
						that.form.hasCourier = 1
						that.form.hasTake = false
					}
				})
				console.log("that.delivery:", that.delivery);
			},
			//提交订单，点击提交订单按钮的时候加一个加载图标的全局遮罩，等请求完成后再放开
			subOrder() {
				if (this.form.amount == 0) {
					uni.showToast({
						title: "请输入重量",
						icon: 'none',
						duration: 2000
					})
					return;
				}
				if (!this.form.payWay) {
					uni.showToast({
						title: "请选择支付方式",
						icon: 'none',
						duration: 2000
					})
					return;
				}
				if (!this.form.hasTake) {
					this.form.hasTake = ''
				} else {
					this.form.hasTake = 1
				}
				if (this.form.hasCourier == 1) {
					console.log("this.city: ", this.city);
					if (!this.$comm.checkNull(this.city, this.area)) {
						uni.showToast({
							title: "请选择收货地址",
							icon: "none"
						})
						return
					}
				}
				uni.showLoading({
						title: "订单提交中"
					}),
					this.$axios({
						url: `user/plot/subOrder`,
						method: "post",
						data: {
							id: this.form.id,
							type: 1,
							amount: this.form.amount,
							img: JSON.stringify(this.form.img),
							remark: this.form.remark,
							hasTake: this.form.hasTake,
							payType: this.form.payWay == "wechat" ? 2 : 1,
							address: this.$comm.checkNull(this.delivery) ? this.delivery : "",
							phone: this.$comm.checkNull(this.phone) ? this.phone : "",
							province: this.$comm.checkNull(this.province) ? this.province : "",
							city: this.$comm.checkNull(this.city) ? this.city : "",
							area: this.$comm.checkNull(this.area) ? this.area : "",
							name: this.$comm.checkNull(this.name) ? this.name : "",
							hasCourier: this.$comm.checkNull(this.form.hasCourier) ? this.form.hasCourier : ""
						}
					}).then((res) => {
						//这里取消遮罩，然后提示订单提交成功,再然后就跳转到支付页面，支付有微信支付和余额支付两种
						uni.hideLoading()
						if (res.code == 0) {
							uni.showToast({
								title: "订单提交成功",
								icon: 'none',
								duration: 2000
							})
							//成功提交执行对应操作
							if (this.form.payWay == "balance") {
								uni.showLoading({
										title: "余额支付中......"
									}),
									this.balancePay(res.result)
							} else {
								uni.showLoading({
										title: "微信支付中......"
									}),
									this.weChatPay(res.result)
							}
						}
					})
			},
			//微信支付
			weChatPay(orderNum) {
				this.$axios({
					url: "wx/pay/createJsApiOrder",
					method: "post",
					data: {
						orderNum: orderNum,
						type: 3
					}
				}).then((response) => {
					let that = this
					uni.hideLoading()
					if (response.code == 0) {
						uni.requestPayment({
							provider: 'wxpay', //支付类型-固定值
							timeStamp: response.result.timeStamp, // 时间戳（单位：秒）
							nonceStr: response.result.nonceStr, // 随机字符串
							package: response.result.packageValue, // 固定值
							signType: response.result.signType, //固定值
							paySign: response.result.paySign, //签名
							success: function(response) {
								uni.showToast({
									title: '支付成功！',
									icon: "none",
								})
								if (that.form.hasTake && this.form.hasCourier == -1) {
									that.dingyue(1)
								}
								if (this.form.hasCourier == 1 && !this.form.hasTake) {
									this.dingyue(2)
								}
								//跳转到订单列表
								uni.redirectTo({
									url: '../../pages/mine/order'
								})
							},
							fail: function(err) {
								uni.showToast({
									title: '支付失败,请在订单列表处重新支付',
									icon: "none",
								})
								//跳转到订单列表
								uni.redirectTo({
									url: '../../pages/mine/order'
								})
							},
						});
					}
				})
			},
			// 余额支付
			balancePay(orderNum) {
				this.$axios({
					url: `user/plot/balancePay`,
					method: "post",
					data: {
						orderNum: orderNum,
					}
				}).then((res) => {
					if (res.code == 0) {
						uni.hideLoading()
						uni.showToast({
							title: "支付成功!",
							icon: 'none',
							duration: 2000
						})
						if (this.form.hasTake && this.form.hasCourier == -1) {
							this.dingyue(1)
						}
						if (this.form.hasCourier == 1 && !this.form.hasTake) {
							this.dingyue(2)
						}
						//跳转到订单列表
						uni.redirectTo({
							url: '../../pages/mine/order'
						})
					} else {
						uni.showToast({
							title: res.result,
							icon: 'none',
							duration: 2000
						})
					}
				})
			},
			dingyue(type) {
				//获取订阅消息权限
				uni.requestSubscribeMessage({
					//此处填写刚才申请模板的模板ID
					tmplIds: type == 1 ? ['JnkhTGuxOZjmCqlHE5KdZsgfYk79cs-kIuCb7IzQDmc'] : [
						'zihdFSPm2PxHZZPO5HUJkFTx3RtsWD1rxqzV5rtelLA'
					],
				})
			},
			uploadPhotos() {
				let that = this
				uni.chooseImage({
					count: 3,
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'],
					success: function(e) {
						console.log(e.tempFilePaths)
						//遍历数组，转化为base64类型并添加到base64arr数组里						
						e.tempFilePaths.forEach((item) => {
							if (that.form.img.length < 3) {
								that.base64Arr.push(item)
								that.form.img.push("data:image/jpeg;base64," + uni
									.getFileSystemManager().readFileSync(item, 'base64'))
							} else {
								uni.showToast({
									title: '最多可上传3张',
									icon: 'none',
									duration: 2000
								})
							}
						})
					}
				});
			},
			//计算总价
			count() {
				//保留2位
				this.totalPrice = (this.form.amount * this.product.price).toFixed(2)
			},
			checkeds() {
				this.checked = !this.checked
				console.log('3333')
			}

		}
	}
</script>

<style scoped lang="scss">
	.tipColor {
		color: $theme-buy-color;
		font-size: 28rpx;
		text-align: left;
	}

	.plotAddress {
		margin: 15rpx 15rpx 25rpx;
		font-size: 13px;
		text-align: left;
		/* color: #777777; */
	}

	.icon {
		width: 50rpx;
		height: 50rpx;
		margin-right: 20rpx;
		margin-top: 10rpx;
	}

	.cartBox {
		width: 750rpx;
		text-align: center;
		margin-top: 15rpx;
	}

	.cartBoxBot {
		display: flex;
		justify-content: space-between;
		margin: 15rpx 15rpx 25rpx;
		padding-top: 20rpx;
		border-top: 0.5rpx solid #eeeeee;
	}

	.icon_next {
		width: 30rpx;
		height: 30rpx;
		margin-top: 7rpx;
	}

	.plotAddressBorder {
		margin-top: 20rpx;
		padding-top: 20rpx;
		border-top: 0.5rpx solid #eeeeee;
	}

	.cartBoxBot2 {
		display: flex;
		justify-content: space-between;
		margin: 15rpx 15rpx 25rpx;
		/* padding-top:20rpx; */
	}

	.cartList {
		width: 89vw;
		margin: 10rpx auto;
		/* height: calc(22vw + 34rpx); */
		border-radius: 12rpx;
		background-color: #fff;
		box-shadow: 0px 4rpx 16rpx rgba(0, 0, 0, .1);
		overflow: hidden;
		border: 0;
		position: relative;
		margin-bottom: 20rpx;
	}

	.phoFlex {
		display: flex;
		margin-left: 20rpx;
	}

	.checkboxBox {
		padding-left: 16rpx;
		flex-shrink: 0;
		height: 22vw;
		line-height: 22vw;
		margin-right: 16rpx;
		align-items: center;
		position: relative;
		width: 30rpx;
	}

	.imgBox {
		width: 22vw;
		height: 22vw;
		flex-shrink: 0;
		margin-left: 15rpx;
		border-radius: 8rpx;
		overflow: hidden;
		margin-right: 10rpx;
		position: relative;
	}

	.rightBox {
		height: 22vw;
		width: 70%;
		padding-right: 15rpx;
		position: relative;
	}

	.rightBoxtop {
		text-align: left;
		margin-top: 10rpx;
		font-size: 26rpx;
	}

	.food-btm {
		text-align: left;
		margin-top: 20rpx;
		text-overflow: -o-ellipsis-lastline;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.food-price {
		color: #f01414;
		font-size: 16px;
	}

	.photobtn {
		margin-left: 10rpx;
		height: 50rpx;
		font-size: 18rpx;
		width: 130rpx;
		line-height: 50rpx;
	}

	.cartBottom {
		padding-left: 20rpx;
		width: 750rpx;
		position: fixed;
		bottom: 0;
		background-color: #fff;
		height: 11vw;
		display: flex;
		align-items: center;
	}

	.allcount {
		color: #C4C4C4;
		margin-left: 20rpx;
	}

	.delBox {
		height: 9vw;
		width: 120rpx;
		border-radius: 30rpx;
		margin-right: 20rpx;
		line-height: 9vw;
		text-align: center;
		color: #fff;
		background-color: #C4C4C4;
	}

	.settlementBox {
		height: 9vw;
		width: 180rpx;
		padding: 0 50rpx;
		border-radius: 40rpx;
		margin-right: 20rpx;
		line-height: 9vw;
		text-align: center;
		color: #fff;
		background-color: #3cc51f;

	}

	.rightbot {
		margin-right: 15rpx;
		position: absolute;
		right: 0;
		display: flex;
	}

	.photoBox {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 680rpx;
		height: 130rpx;
		margin: 0 auto;
		background-color: #fff;
		border-radius: 20rpx;
		margin-bottom: 100rpx;
	}
</style>
